<template>
  <div>
    <div id="search-options">
        <el-form size="small" :inline="true">
          <el-form-item label="英文或中文名称：">
            <el-input  v-model="searchForm.text" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" id="query-btn" plain icon="el-icon-search" type="primary" @click="searchData">查询</el-button>
            <el-button size="small" id="add-btn" plain icon="el-icon-plus" type="primary" @click="openSaveDialog('add')">添加</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div style="margin-left:20px;margin-right:20px;">
        <el-table id="data-table" :data="roleList" style="width: 100%" border :highlight-current-row="true" stripe>
            <el-table-column prop="id" label="id" align="center"></el-table-column>
            <el-table-column prop="name" label="英文名称" align="center"></el-table-column>
            <el-table-column prop="title" label="中文名称" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="170px" align="center">
                 <template slot-scope="scope">
                    <el-tooltip  effect="dark" content="编辑" placement="bottom-end">
                     <el-button size="small" plain  class="el-icon-edit"  type="primary" @click="openSaveDialog('edit',scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip  effect="dark" content="删除" placement="bottom-end">
                     <el-button size="small" plain  icon="el-icon-delete" type="danger" v-on:click="del(scope.row.id)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>

       <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogFormVisible" :center="true" v-el-drag-dialog @dragDialog="handleDrag">
        <el-form :model="saveRoleForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="英文名称：" label-width="120px" required>
                <span style="color:red;width:20%;">&nbsp;</span>
                <el-input  style="width:80%;" v-model="saveRoleForm.name" autocomplete="off" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中文名称：" label-width="120px">
                <span style="width:20%;">&nbsp;</span>
                <el-input style="width:80%;" v-model="saveRoleForm.title" autocomplete="off" clearable></el-input>
              </el-form-item>
             </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="描述：" label-width="120px">
                <span style="width:20%;">&nbsp;</span>
                <el-input style="width:80%;" v-model="saveRoleForm.description" autocomplete="off" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单：" label-width="120px">
                <span style="width:20%;">&nbsp;</span>
                <el-tree
                  ref="tree"
                  :check-strictly="checkStrictly"
                  :data="routesData"
                  :props="defaultProps"
                  node-key="id"
                  show-checkbox
                  >
                </el-tree>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" plain class="el-icon-close" type="info" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="small" plain class="el-icon-check" type="primary" @click="saveData">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  name: 'elDragDialog',
  directives: { elDragDialog },
  data () {
    return {
        roleList: [{
            id: null,
            name: '',
            title: '',
            description: '',
            createTime: ''
        }],
        searchForm: {
            text: ''
        },
        dialogTitle: '',
        dialogFormVisible: false,
        saveRoleForm: {
            id: null,
            name: '',
            title: '',
            description: '',
            menuList: []
        },
        checkStrictly: true,
        routesData:[],
        // defaultCheckedKeys: [],
        defaultProps: {
          children: 'subMenuList',
          label: 'name'
        },
    }
  },
  methods: {
      handleDrag() {
      },
      loadData () {
          let vm = this
          vm.$http.post('api/role/findList',vm.searchForm).then(res => {
            if (res.data.code === 0){
              vm.roleList = res.data.data
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
          vm.$http.post('api/menu/find',{}).then(res => {
            if (res.data.code === 0){
              vm.routesData = res.data.data
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      },
      searchData () {
          let vm = this
          vm.loadData()
      },
      del (id) {
        let vm = this
        vm.$confirm('确认彻底删除该数据吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            vm.$http.get('api/role/deleteRelation/' + id).then(res => {
                if (res.data.code === 0){
                    vm.$message.success('删除成功')
                    vm.loadData()
                }
                else {
                vm.$message.error(res.data.msg)
                }
            })
        }).catch(errMsg => {
        })
      },
      resetForm () {
        let vm = this
        vm.saveRoleForm = {
            id: null,
            name: '',
            title: '',
            description: '',
            menuList: []
        }
      },
      findDetail (id) {
        let vm = this
        vm.$http.get('api/role/findRoleDetail/' + id).then(res => {
            if (res.data.code === 0){
             vm.saveRoleForm = res.data.data
             vm.$refs.tree.setCheckedKeys(vm.saveRoleForm.menuIds)
            }
            else {
             vm.$message.error(res.data.msg)
            }
        })
      },
      openSaveDialog (opt,row) {
        let vm = this
        vm.resetForm()
        if('edit' === opt) {
           vm.dialogTitle = '修改'
           vm.findDetail(row.id)
           vm.dialogFormVisible = true
        }
        else if ('add' === opt) {
            vm.dialogTitle = '添加'
            vm.dialogFormVisible = true
            vm.$refs.tree.setCheckedKeys([])
        }
      },
      saveData () {
          let vm = this
          // console.log(vm.$refs.tree.getCheckedKeys())
          vm.saveRoleForm.menuList = vm.$refs.tree.getCheckedKeys()
          vm.$http.post('api/role/save',vm.saveRoleForm).then(res => {
            if (res.data.code === 0){
                vm.$message({
                    message: '保存角色成功',
                    type: 'success'
                })
                vm.dialogFormVisible = false
                vm.loadData()
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      }
  },
  mounted() {
    let vm = this
    vm.loadData()
  }
}
</script>
